<template>
  <div>
      <div style="background-color: white">
      <el-row>
          <el-col :span="3" :pull="0">
                <span style="color: #606266;font-size:25px;font-weight:bold" href="#">欠费缴费</span>
            </el-col>
            <el-col :push="17" :span="6">
                <el-button @click="demo2()">上一页</el-button>
            </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
      </div>
    <hr />
    <el-row>
        <el-col :span="3">
            <span style="color: #606266;font-size:20px;">{{$store.state.dingdan_houseid}}号房屋的费用：</span>
        </el-col>
    </el-row>
    <template>
      <el-table :data="Order2Info" style="width: 100%" @selection-change="handleSelectionChange">
           <el-table-column
           align=center
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column sortable prop="id" label="费用ID" width="230">
        </el-table-column>
          <el-table-column prop="payitems.pname" label="收费项目" width="280">
        </el-table-column>
        <el-table-column prop="start" label="计费开始时间" width="280">
        </el-table-column>
        <el-table-column prop="end" label="计费结束时间" width="220">
        </el-table-column>
        <el-table-column prop="payitems.money" label="欠费金额" width="180">
        </el-table-column>
      </el-table>
    </template>
    <el-row>
        <el-col :span="5" :push="15">
            缴费金额：<span style="color: #606266;font-size:20px;">{{this.moneysum}}</span>
        </el-col>
        <el-col :span="5" :push="15">
             <el-button type="primary" @click="dialogFormVisibleinsert=true">缴费</el-button>
        </el-col>
    </el-row>

    <el-dialog :append-to-body="true" title="收费确认" :visible.sync="dialogFormVisibleinsert">
        <el-form>
        <el-form-item label="房屋编号：" label-width="120px">
            <el-input v-model="this.$store.state.dingdan_houseid" :disabled="true">
            </el-input>
        </el-form-item>
        <el-form-item label="金额：" label-width="120px">
          <el-input v-model="moneysum" autocomplete="off" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="支付方式：" label-width="120px">
           <el-select v-model="test">
               <el-option value="网银转账">
               </el-option>
               <el-option value="现金">
               </el-option>
               <el-option value="支付宝">
               </el-option>
               <el-option value="微信转账">
               </el-option>
               <el-option value="pos刷卡">
               </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label-width="120px" label="是否开发票：">
                <el-radio v-model="is_invoice" label="是">是</el-radio>
                <el-radio v-model="is_invoice" label="否">否</el-radio>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="demo()">保存</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
  return{
      test:'',
      orderid:[],
      is_invoice:'',
      dialogFormVisibleinsert:false,
      moneysum:'0',
      multipleSelection:[],
    Order2Info:[],
  };
},
methods: {
    demo2(){
        this.$router.push("/feiyong/fangwushoufei");
    },
    demo(){
        let url="shoufei/jiaofei2";
        console.log(this.orderid);
        let param={id:this.orderid,is_invoice:this.is_invoice};
        this.$axios.post(url,param).then(resp=>{this.find();this.dialogFormVisibleinsert=false;});
    },
    handleSelectionChange(val) {
        this.moneysum='0';
        this.orderid=[];
        this.multipleSelection = val;
        this.multipleSelection.forEach(item=>{
            this.orderid.push(item.id);
           this.moneysum=parseInt(this.moneysum)+parseInt(item.payitems.money);
        });
      },
    find(){
        let url="shoufei/jiaofei";
        let param={houseId:this.$store.state.dingdan_houseid};
        this.$axios.post(url,param).then(resp=>{this.Order2Info=resp.data.result;});
    }
},
mounted(){
  this.find();
}
}
</script>

<style>

</style>